﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="opAdd">新增</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search" type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="活动时间" label-width="100px">
                        <el-date-picker style="width: 300px" v-model="queryList.activityDates" type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" range-separator="-"
                            unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime"/>
                    </el-form-item>
                    <el-form-item label="活动名称" label-width="100px">
                        <el-input placeholder="---请输入名称---" v-model="queryList.ActivityName" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="活动类型" label-width="100px">
                        <el-select placeholder="---请选择活动类型---" v-model="queryList.ActivityType" style="width: 300px">
                            <el-option label="---请选择---" value />
                            <el-option v-for="item in optionsActivityType" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物料规格" label-width="100px">
                        <el-input placeholder="---请输入物料规格---" v-model="queryList.MaterialSpecs" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="物料简码" label-width="100px">
                        <el-input placeholder="---请输入物料简码---" v-model="queryList.MaterialSimpCode" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="物料编码" label-width="100px">
                        <el-input placeholder="---请输入物料编码---" v-model="queryList.MaterialCode" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="物料名称" label-width="100px">
                        <el-input placeholder="---请输入物料名称---" v-model="queryList.MaterialName" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="物料分类" label-width="100px">
                        <el-tree-select
                            v-model="queryList.MaterialTypeIds"
                            :props="{ label: 'label', value:'value',children: 'children' }"
                            :data="materialTypeTree"
                            collapse-tags
                            collapse-tags-tooltip
                            multiple
                            :render-after-expand="false"
                            show-checkbox
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label-width="120px" label="单位">
                        <el-select
                            placeholder="---请选择单位---"
                            v-model="queryList.UnitCode"
                            style="width: 300px"
                        >
                            <el-option
                                v-for="item in optionsUnit"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <scTable ref="mytable" :queryType="'supplier-activity/pages'" :queryList="queryList"
                :column="columnList" :orderList="OrderList" :sort-orders="['ascending', 'descending']" 
                @selection-change="selectionChange" stripe remoteSummary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="startDate" label="活动时间" width="240" sortable>
                    <template #default="scope">{{ scope.row.activityDateDesc}}</template>
                </el-table-column>
                <el-table-column prop="activityName" label="活动名称" width="180" sortable></el-table-column>
                <el-table-column prop="activityType" label="活动类型" width="120" sortable>
                    <template #default="scope">{{ scope.row.activityTypeDesc}}</template>
                </el-table-column>
                <el-table-column prop="materialCode" label="物料编码" width="120" sortable></el-table-column>
                <el-table-column prop="materialName" label="物料名称" width="180" sortable></el-table-column>
                <el-table-column prop="materialTypeName" label="分类" width="150" sortable></el-table-column>
                <el-table-column prop="materialSpecs" label="物料规格" width="150" sortable></el-table-column>
                <el-table-column prop="unitName" label="单位" width="110" sortable></el-table-column>
                <el-table-column prop="activityQty" label="活动数量" width="110" sortable></el-table-column>
                <el-table-column prop="activityPrice" label="活动价格" width="110" sortable></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="200">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small"
                                @click="opShow(scope.row, scope.$index)">查看</el-button>
                            <el-button text type="primary" size="small"
                                @click="opEdit(scope.row, scope.$index)">编辑</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <save-dialog v-if="dialogSave" ref="saveDialog" @fatherMethod="opBindData" @success="handleSaveSuccess"
        @closed="dialogSave = false"></save-dialog>

    <detail-dialog v-if="dialogDetail" ref="detailDialog" @fatherMethod="opBindData" @success="handleSaveSuccess"
        @closed="dialogDetail = false"></detail-dialog>
</template>

<script>
import detailDialog from "./detail";
import saveDialog from "./save";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "posInfo-room",
    components: {
        detailDialog,
        saveDialog,
        publicjs,
    },
    data() {
        return {
            dialogDetail: false,
            dialogSave: false,
            receiveSave: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["supplierActivityId"],
            columnList: [],
            OrderList: { supplierActivityId: "Asc" },
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            warehouseProps: {
                label: "warehouseName",
                value: "warehouseId",
            },
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsActivityType: [],
            materialTypeTree: [],
            optionsUnit: [],
            orgType: 0,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(0);
                this.$refs.saveDialog.open("Add");
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row.supplierActivityId);
                this.$refs.saveDialog.open("Edit");
            });
        },
        //查看
        opShow(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row.supplierActivityId);
                this.$refs.saveDialog.open("show");
            });
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["ActivityType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsActivityType = returnValue.response.find(
                        (p) => p.code == "ActivityType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/dic-options",
                    { ParentBaseDictionaryCodes: ["001", "002"] }
                );
                if (returnValue.status == 200) {
                    this.optionsUnit = returnValue.response.find(
                        (p) => p.code == "002"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //仓库
        async warehouseSelectProcess(rowData) {
            this.queryList.warehouses = [];
            this.queryList.warehouseIds = [];
            if (rowData && rowData.length > 0) {
                rowData.map((p, index) => {
                    if (p) {
                        debugger;
                        this.queryList.warehouses = [
                            ...this.queryList.warehouses,
                            {
                                warehouseId: p.warehouseId,
                                warehouseName: p.warehouseName,
                            },
                        ];
                        this.queryList.warehouseIds = [
                            ...this.queryList.warehouseIds,
                            p.warehouseId,
                        ];
                    }
                });
            }
            await this.opBindData();
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
